<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>旋转木马轮播图</title>
		<link rel="stylesheet" type="text/css" href="css.css" />
	</head>
	<body>
		<div class="wrap" id="wrap">
			<div class="slide" id="slide">
				<ul>
					<li><a href=""><img src="1.jpg" alt="" /></a></li>
					<li><a href=""><img src="2.jpg" alt="" /></a></li>
					<li><a href=""><img src="3.jpg" alt="" /></a></li>
					<li><a href=""><img src="4.jpg" alt="" /></a></li>
					<li><a href=""><img src="5.jpg" alt="" /></a></li>
				</ul>
				</ul>
				<div class="arrow" id="arrow">
					<a href="javascript:;" class="prev" id="prev"></a>
					<a href="javascript:void(0);" class="next" id="next"></a>
				</div>
			</div>
		</div>
		<script src="../public0.1.1.js"></script>
		<script type="text/javascript">
			//需求分析:
			//1 把每个li按照指定的样式进行定位(缓动)
			//2 鼠标移入wrap中,出现左右箭头,鼠标移出wrap,隐藏左右箭头
			//3 点击左箭头看上一张,点击右箭头看下一张

			var json = [{
					"width": 400,
					"top": 20,
					"left": 50,
					"opacity": 20,
					"zIndex": 2
				},
				{
					"width": 600,
					"top": 70,
					"left": 0,
					"opacity": 80,
					"zIndex": 3
				},
				{
					"width": 800,
					"top": 100,
					"left": 200,
					"opacity": 100,
					"zIndex": 4
				},
				{
					"width": 600,
					"top": 70,
					"left": 600,
					"opacity": 80,
					"zIndex": 3
				},
				{
					"width": 400,
					"top": 20,
					"left": 750,
					"opacity": 20,
					"zIndex": 2
				}
			]
			//获取元素
			var container = $id('wrap');
			var box = $id('slide');
			var ul = box.children[0]; //放图片的ul
			var liArr = ul.children; //所有的li图片
			var arrow = $id('arrow'); //箭头容器
			var prev = $id('prev'); //左箭头,点击看上一张
			var next = $id('next'); //右箭头,点击看下一张
			/* function show(){
			   //1 把每个li按照指定的样式进行定位(缓动)
			   for(var i=0;i<liArr.length;i++){
			     //根据封装的方法,把每个li缓动到指定目标
			     animate(liArr[i],json[i])
			   }
			 }
			 show()*/

			//2 鼠标移入ul中,出现左右箭头
			container.onmouseenter = function() {
				arrow.style.opacity = 1;
				arrow.style.filter = "alpha(opacity=100)";
			}
			container.onmouseleave = function() {
				arrow.style.opacity = 0;
				arrow.style.filter = "alpha(opacity=0)";
			}

			//回忆数组的基础操作
			//push:从后往前推入一个数组元素
			//pop:删除数组的最后一个元素
			//shift:删除数组的第一个元素,返回值就是被删除的数组元素
			//unshift:从数组前面推入一个数组元素


			//3 点击左箭头看上一张,点击右箭头看下一张
			/* prev.onclick = function(){
			     //拿到第一个
			     var obj = json.shift();
			     //把obj从数组的后面插入
			     json.push(obj);
			     //显示li
			     show();

			 }
			 next.onclick = function(){
			    //拿到最后一个
			    var obj = json.pop();
			    //把obj从数组的最前面插入
			    json.unshift(obj);
			    //显示li
			    show()

			 }*/
			console.log(json)
			var flag = true
			prev.onclick = function() {
				//拿到第一个
				if (flag) {
					flag = false
					var obj = json.shift();
					console.log(obj);
					//把obj从数组的后面插入
					json.push(obj);
					console.log(json.push(obj));
					//显示li
					show();
					console.log(json);
				}

			}
			next.onclick = function() {
				if (flag) {
					flag = false
					//拿到最后一个
					var obj = json.pop();
					//把obj从数组的最前面插入
					console.log(obj);
					json.unshift(obj);
					console.log(json.unshift(obj));
					//显示li
					show()
					console.log(json);
				}

			}

			function show() {
				//1 把每个li按照指定的样式进行定位(缓动)
				for (var i = 0; i < liArr.length; i++) {
					//根据封装的方法,把每个li缓动到指定目标
					animate(liArr[i], json[i], function() {
						flag = true
					})
				}
			}
			show()

			var flag = true
			prev.onclick = function() {
				//拿到第一个
				if (flag) {
					flag = false
					var obj = json.shift();
					console.log(obj);
					//把obj从数组的后面插入
					json.push(obj);
					console.log(json.push(obj));
					//显示li
					show();
					console.log(json);
				}

			}
			next.onclick = function() {
				if (flag) {
					flag = false
					//拿到最后一个
					var obj = json.pop();
					//把obj从数组的最前面插入
					console.log(obj);
					json.unshift(obj);
					console.log(json.unshift(obj));
					//显示li
					show()
					console.log(json);
				}

			}
		</script>
	</body>
</html>
